<template>
    <div class="code-wrap">
        <view class="code-bg" @click="hideInput"></view>
        <view class="main">
            <view class="close-btn" @click="hideInput"></view>
            <view class="title">输入券码</view>
            <view class="inpnt-tip">请输入券码</view>
            <view class="card-number">
                <input class="" placeholder="请输入券码" placeholder-style="color:#dfe1e3;" maxlength="12" v-model="couponNumber" @blur="inputBlur" @input="onCouponNumberInput" />
            </view>
            <view class="err-tip" v-if="inputError">输入有误，如有疑问请联系客服 400-865-8188</view>
            <view class="btn" @click="sure">确定</view>
        </view>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            couponNumber: '',
            inputError: false
        };
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        hideInput() {
            this.$emit('hideInput');
        },
        inputBlur(event) {
            this.$emit('inputBlur', this.couponNumber);
        },
        onCouponNumberInput() {
            let number = this.couponNumber.replace(/\s+/g, '');
            this.couponNumber = number.replace(/(\w{3})(?=\w)/g, '$1' + ' ');
        },
        sure() {
            if (!this.couponNumber) {
                this.$showToast('请输入券码！');
                return false;
            }
            this.$emit('updateCouponNumber', this.couponNumber);
        }
    },
    components: {}
};
</script>
<style lang="scss" scoped="scoped">
.code-wrap {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 100vh;
    .code-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 750rpx;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
    }
    .main {
        position: absolute;
        left: 50%;
        top: 360rpx;
        transform: translate(-50%, 0);

        background-color: #ffffff;
        border-radius: 10rpx;
        padding: 40rpx 30rpx 60rpx;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        font-size: 30rpx;
        .close-btn {
            position: absolute;
            right: 30rpx;
            top: 40rpx;
            width: 30rpx;
            height: 30rpx;
            background-image: url(@/static/common/closeBtn.png);
            background-size: cover;
        }
        .title {
            align-self: center;
            font-size: 36rpx;
        }
        .inpnt-tip {
            margin-top: 50rpx;
        }
        .card-number {
            margin-top: 40rpx;
        }
        .err-tip {
            margin-top: 70rpx;
            font-size: 26rpx;
            color: #ff4d4d;
        }
        .btn {
            margin: 100rpx auto 0;
            width: 580rpx;
            height: 86rpx;
            background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
            border-radius: 10rpx;
            text-align: center;
            line-height: 86rpx;
            color: #ffffff;
            font-size: 30rpx;
        }
    }
}
</style>
